<template>
    <div class="layerRtb layerRtb-threecolumn">
        <three-title :title="{name:'积分详情'}"></three-title>
        <div class="layerRtb-scroll thinScroll" v-scrollHeight="137">
            <div class="analyItem anItemBor" @click="clickFour(index,item)" v-for="(item, index) in clab" :key="index">
                <p class="analyItemTit tx-center">{{item.integralDescription}}</p>
                <div class="analyItemCon">
                    <p class="col-md-4">
                        <span class="cLightGray pr10">奖</span>
                        <span class="cGreen">{{item.integralIncrease}}分</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr10">罚</span>
                        <span class="cRed">{{item.integralDeduction}}分</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr10">总计</span>
                        <span class="cGreen fz14">{{item.integralMoney}}分</span>
                    </p>
                </div>
            </div>
            <div class="analyItem" v-if="clab.length === 0">
                <p class="analyItemTit tx-center">详情</p>
                <div class="analyItemCon">
                    <p class="col-md-4">
                        <span class="cLightGray pr10">暂无数据</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layerRtb-footer">
            <div class="analyItem">
                <p class="analyItemTit tx-center">综合</p>
                <div class="analyItemCon">

                    <p class="col-md-4">
                        <span class="cLightGray pr10">奖</span>
                        <span class="cGreen">{{integraljiang}}分</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr10">罚</span>
                        <span class="cRed">{{integralfa}}分</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr10">总计</span>
                        <span class="cGreen">{{integralCount}}分</span>
                    </p>
                </div>
            </div>
        </div>
        <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
            <!-- 正常 -->
            <inte-Four v-if="fourIndex !== -1" :key='fourIndex' :fourItem="fourItem"></inte-Four>
        </transition-group>
    </div>
</template>
<script>

import { mapGetters } from 'vuex'
import inteFour from './four/inteFour'
export default {
    components: {
        inteFour
    },
    data () {
        return {
            integralType: 0,
            body: {},
            integralThreeData: {},
            integralCount: 0,
            integraljiang: 0,
            integralfa: 0,
            clab: {},
            fourIndex: -1,
            fourItem: {}

        }
    },
    created () {
        this.clab = this.$route.query.clab

        this.getIntegralThreeDataFn()
    },
    computed: {
        ...mapGetters(['leftInfo', 'userInfo', 'updatePlate'])
    },
    methods: {
        clickFour (index, item) {
            this.fourIndex = index
            this.fourItem = item
        },
        getIntegralThreeDataFn () {
            this.integralCount = 0
            this.integraljiang = 0
            this.integralfa = 0

            for (var i = 0; i < this.clab.length; i++) {
                this.integralCount += this.clab[i].integralMoney
                this.integraljiang += this.clab[i].integralIncrease
                this.integralfa += this.clab[i].integralDeduction
            }
        }
    },
    watch: {
        $route () {
            this.clab = this.$route.query.clab

            // this.getIntegralThreeDataFn()
        }
    }
}
</script>
